import React from 'react';
import {Modal,Tag,Button} from "antd-mobile"
let fitobj={// 处理展示数据
    roomtype:"户型",
    orienteds:"朝向",
    charact:"特色",
    floor:"楼层",
    price:"价格"
}
// roomTypeID	否	string	户型id
// orientedID	否	string	朝向id
// floor	否	string	楼层
// tagsID	否	string	闪光点
// price

let pobj={// 处理展示数据
    roomtype:"roomTypeID",
    orienteds:"orientedID",
    charact:"tagsID",
    floor:"floor",
    price:"price"
}

let params={}// 参数的对象
class Fit extends React.Component {
    state={
       isshow:0,// 是否展示弹框
       fit:{}// 条件
    }
    sel(w,x,cut){// 标签当前的状态
        // console.log(cut);
        let {fit}=this.state
        // console.log(w);// 键
        //  console.log(x);
        // console.log(this.state.fit[w]);
        // x.sel=1
        // 先让所有的不选中 
        fit[w].map((v,k)=>{
            v.sel=0
        })
        x.sel=cut// 让点击的选中
        // console.log(fit[w]);
        // 更新数据
        this.setState({
            fit
        })
        
        // console.log(pobj[w]);// 找到要传参的健 
        // console.log(x.code);// 找到要传参的值
        // params[pobj[w]]=x.code// 组合参数
        // 判断要不要组合参数
        if(cut){// 是否是选中状态
            params[pobj[w]]=x.code// 组合参数
        }else{
           delete params[pobj[w]]// 删除对应的健
        }
        // console.log(params);

    }
    render() { 
        // 获取state的数据
        let {fit} =this.state
        return <div>
            <div onClick={()=>{
                this.setState({
                    isshow:1
                })
            }}>筛选</div>

            <Modal
                popup
                // closable
                visible={this.state.isshow}
                // onClose={()=>{
                //     this.setState({
                //         isshow:0
                //     })
                // }}
                animationType="slide-down"
                // afterClose={() => { alert('afterClose'); }}
                >
                {
                   // 获取对象键的集合 Object.keys(obj)
                   Object.keys(fit).map((v,k)=>{
                       return <div>
                           <h3>
                           {fitobj[v]}
                           </h3>
                           <div style={{
                               display:"flex",
                               justifyContent:"space-between",
                               flexWrap:"wrap",
                               
                           }}>
                               {
                                   fit[v].map((i,j)=>{
                                       return <div style={{
                                           margin:"5px"
                                       }}>
                                           <Tag 
                                           selected={i.sel} 
                                           onChange={(cut)=>{this.sel.bind(this,v,i,cut)()}}>
                                           {i.name}
                                           </Tag>
                                       </div>
                                   })
                               }
                           </div>
                       </div>
                   })
                }
                <div>
                    <Button type="primary" onClick={()=>{
                        console.log(params);
                        this.setState({
                            isshow:0
                        })
                        // 调用父组件传过来的确定的方法 并且把参数回应出去
                        this.props.sure(params)
                    }}>确定</Button>
                    <Button onClick={()=>{
                        params={}// 参数置空
                        this.getCondition()// 初始状态
                        this.setState({
                            isshow:0
                        })
                        // 调用父组件传过来的取消的方法 并且把参数回应出去
                        this.props.qux(params)
                    }}>取消</Button>
                </div>
                </Modal>
        </div>;
    }
    getCondition(){// 初始请求
        this.api.getCondition()
        .then(res=>{
            // console.log(res);
            if(res.data.code==200){
                let data=res.data.msg
                // console.log(data);
                for(let k in data){
                    // console.log(data[k]);
                    data[k].map((v,k)=>{
                        // console.log(v);
                        v.sel=0// 让每一个初始选项为false
                    })
                }
                // console.log(data);
                this.setState({
                    fit:data
                })
            }
        })
    }
    componentDidMount(){
        this.getCondition()
    }
}
 
export default Fit;